<template>
    <div class="myself">
        <div class="top">
            <el-icon @click="$router.go(-1)">
                <ArrowLeft />
            </el-icon>
            <h2>个人信息</h2>
        </div>
        <div class="content">
            <ul>
                <li class="img">头像：<img :src="imgUrl"></li>
                <li>昵称：{{ userInfo.nickName }}</li>
                <li>账号：{{ userInfo.account }}</li>
                <li>年龄：{{ userInfo.age }}</li>
                <li>性别：{{ userInfo.sex }}</li>
                <li>地址：{{ userInfo.address }}</li>
                <li>邮箱：{{ userInfo.email }}</li>
                <li>手机：{{ userInfo.phone }}</li>
            </ul>
        </div>
    </div>
</template>

<style lang="less" scoped>
.myself {
    width: 100%;
    height: 100vh;
    padding: 10px;

    .top {
        position: relative;
        margin-bottom: 20px;

        h2 {
            font-size: 30px;
            margin-left: 50%;
            transform: translateX(-50%);
            text-align: center;
        }

        svg {
            position: absolute;
        }
    }

    .content {
        ul {
            padding: 5px;

            li {
                margin-bottom: 20px;
                display: flex;
                align-items: center;
                padding: 6px;
                font-weight: bold;
                font-size: 25px;
                border-radius: 15px;
                border-bottom: 2px solid black;

                img {
                    height: 100px;
                    width: 100px;
                    background-color: #ccc;
                    border-radius: 50%;
                }
            }

            .img {
                padding: 0;
                border: none;
            }
        }
    }

    svg {
        width: 40px;
    }
}
</style>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import api from '../api/request'
import http from '../api/index'

let userInfo = reactive({
    nickName: '',
    account: '',
    imgUrl: '',
    age: '',
    sex: '',
    address: '',
    email: '',
    phone: ''
})

let token = localStorage.getItem("token")
let imgUrl = ref('')
if (token) {
    api.userInfo({ token })
        .then(res => {
            if (res.code == 200) {
                userInfo = res.rows
                imgUrl.value=http.host+userInfo.imgUrl
            }

        })
}

</script>